{% extends "base.html" %}
{% block main %}
    <div class="card hoverable" style="margin: 0 auto 16px;width: 60%;">
        <div class="card-content">
            <div class="card-title">学生详情页</div>
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="studentID" type="text" class="validate" disabled placeholder="{{ s.studentID }}" value="{{ s.studentID }}">
                        <label for="studentID">学号</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="name" type="text" class="validate" placeholder="{{ s.name }}" value="{{ s.name }}">
                        <label for="name">姓名</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input id="age" type="number" class="validate" placeholder="{{ s.age }}" value="{{ s.age }}">
                        <label for="age">年龄</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="sex" type="text" class="validate" placeholder="{{ s.sex }}" value="{{ s.sex }}">
                        <label for="sex">性别</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="score" type="number" class="validate" placeholder="{{ s.score }}" value="{{ s.score }}">
                        <label for="score">成绩</label>
                    </div>
                </div>
                <div class="center">
                    <button type="button" class="waves-effect waves-light btn" id="change-button">提交修改</button>
                    <button type="button" class="waves-effect waves-light btn" id="delete-button">删除学生</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
<script type="text/javascript" charset="UTF-8">
    $('#change-button').click(function () {
        $.ajax({
            url: '/api_change/',
            type: 'POST',
            data: {
                studentID: $('#studentID').val(),
                name: $('#name').val(),
                age: $('#age').val(),
                sex: $('#sex').val(),
                score: $('#score').val(),
            },
            dataType: 'json',
            success: function (back) {
                alert(back.status);
                location.reload();
            },
            error: function (code) {
                alert('Status Code: ' + code.status);
            },
        });
    });
    $('#delete-button').click(function () {
        $.ajax({
            url: '/api_delete/',
            type: 'POST',
            data: {
                studentID: $('#studentID').val(),
            },
            dataType: 'json',
            success: function (back) {
                alert(back.status);
                window.location.href=document.referrer||host + "";
            },
            error: function (code) {
                alert('Status Code: ' + code.status);
            },
        });
    });
</script>
{% endblock %}